<template>
    <div class="qilin-check flex-row qilin-px-2 qilin-py-2">
        <div class="qilin-check-question hide-scrollbar qilin-mr-3 qilin-py-3 qilin-px-2">
            <div class="qilin-check-question-title">一、选择题</div>
            <div class="qilin-check-question-box qilin-py-1">
                <div class="qilin-check-question-box-item qilin-py-2" v-for="item in 10" :key="item">
                    <div class="qilin-check-question-box-item-header flex-row">
                        <div class="qilin-check-question-box-item-header-text">
                            {{item}}、在1974年，第一次在东南亚打自由搏击就拿到了（）。
                        </div>
                        <div class="qilin-check-question-box-item-header-btn">
                            <el-button type="default" size="mini">解析</el-button>
                            <el-button type="primary" size="mini">答案</el-button>
                        </div>
                    </div>
                    <div class="qilin-check-question-box-item-content qilin-py-2 qilin-px-1">
                        <el-radio-group v-model="answer">
                            <el-radio :label="1">A.冠军</el-radio>
                            <el-radio :label="2">B.亚军</el-radio>
                            <el-radio :label="3">C.季军</el-radio>
                            <el-radio :label="4">D.四强</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <div class="qilin-check-panel">
            <div class="qilin-check-panel-time qilin-py-2 qilin-px-2">
                <div class="qilin-check-panel-time-title">你好，荒天帝，欢迎作答</div>
                <div class="qilin-check-panel-time-residue qilin-mt-2">作答剩余时间：
                    <span>19:55</span>
                </div>
            </div>
            <div class="qilin-check-panel-info qilin-py-2 qilin-px-2 qilin-mt-2">
                <div class="qilin-check-panel-info-title">
                    已作答：0 / 30
                </div>
                <div class="qilin-check-panel-info-index qilin-my-2 flex-row">
                    <div class="qilin-check-panel-info-index-item qilin-py-2"
                        v-for="item in 30" :key="item"
                    >
                        <span>{{item}}</span>
                    </div>
                </div>
                <div class="qilin-check-panel-info-btn">
                    <el-button type="primary" size="mini" round style="width:100%; margin-top:20px;">提交</el-button>
                    <el-button type="default" size="mini" round style="width:100%; margin:20px 0 0 0;">退出</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            answer:""
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.qilin-check{
    width:100%;
    height:100%;
    background-color:#fff;
    border-radius:$radius-default;
    >.qilin-check-question{
        flex:5;
        background-color:#f1f1f1;
        border-radius:$radius-default;
        >.qilin-check-question-title{
            font-size:$medium-text-size;
            font-weight:bolder;
            color:$text-color-85;
        }
        >.qilin-check-question-box{
            >.qilin-check-question-box-item{
                >.qilin-check-question-box-item-header{
                    align-items:center;
                    justify-content:space-between;
                    font-size:$medium-text-size;
                }
            }
        }
    }
    >.qilin-check-panel{
        flex:2;
        >.qilin-check-panel-time{
            background-color:#f1f1f1;
            border-radius:$radius-default;
            text-align:center;
        }
        >.qilin-check-panel-info{
            background-color:#f1f1f1;
            border-radius:$radius-default;
            >.qilin-check-panel-info-title{
                font-size:$medium-text-size;
            }
            >.qilin-check-panel-info-index{
                flex-wrap:wrap;
                justify-content:space-between;
                >.qilin-check-panel-info-index-item{
                    width:20%;
                    text-align:center;
                    >span{
                        padding:4px;
                        background-color:#fff;
                        border-radius:$radius-circle;
                        display:inline-block;
                        width:24px;
                        height:24px;
                        line-height:16px;
                        font-weight:bolder;
                        cursor:pointer;
                    }
                }
            }
        }
    }
}
</style>
